<template>
    <view class="main">
        <orderItem :goods="goodsList" v-if="goodsList.length > 0"></orderItem>
        <view class="defaultImg" v-if="goodsList.length == 0">
            <image src="../../static/orderDefaultImg.png" mode=""></image>
            <text class="defaultFont">暂时还没有订单哦～</text>
        </view>
    </view>
</template>

<script>
    import orderItem from '@/components/order/order-item'
    import {
        GetOrderList
    } from "@/services/OrderService"
    import {
        getTime
    } from "@/utils/utils"
    export default {
        components: {
            orderItem
        },
        data() {
            return {
                goodsList: [],
                page: 1,
                pageSize: 7
            }
        },
        methods: {
            async asycnGetOrderList(currentPage) {
                this.showLoading()
                let getOrderListRes = await GetOrderList({
                    timestamp: getTime(),
                    page: currentPage,
                    page_size: this.pageSize
                });
                if (getOrderListRes.code != 0) {
                    this.hideLoading()
                    this.tostMsg('网络太慢，请求不到')
                    return false;
                }
                let dateLength = getOrderListRes.datas.order_list.length;
                if (dateLength) {
                    this.hideLoading()
                    for (var i = 0; i < dateLength; i++) {
                        this.goodsList.push(getOrderListRes.datas.order_list[i]);
                    }
                    this.page = currentPage + 1;
                } else {
                    this.hideLoading()
                    this.tostMsg('没有更多数据了')
                }
            }
        },
        onLoad() {
            this.asycnGetOrderList(1)
        },
        onReachBottom() {
            if (this.page != 1) {
                console.log('触底');
                this.asycnGetOrderList(this.page);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        border: 0rpx solid red;

        .defaultImg {
            margin: 0 auto;
            margin-top: 200rpx;
            width: 220rpx;
            border: 0rpx solid red;

            image {
                margin-left: 4rpx;
                height: 200rpx;
                width: 200rpx;
            }

            .defaultFont {
                display: block;
                border: 0rpx solid red;
                /* #ifdef H5 */
                font-size: 6rpx;
                /* #endif */
                /* #ifdef MP */
                font-size: 24rpx;
                /* #endif */
                color: red;
                text-align: center;
                color: #888888;
            }
        }
    }
</style>